import React, { useState } from 'react';
import styles from './style.less';
import { Form, Input, Select, Upload, Button, InputNumber, Modal } from 'antd';
import { useParams, history } from 'umi';
import { Book_Publish } from '@/services/api';
import ReactFileReader from 'react-file-reader';

function Publish() {
  const [bookName, setBookName] = useState('');
  const [author, setAuthor] = useState('');
  const [publisher, setPublisher] = useState('');
  const [type, setType] = useState('');
  const [price, setPrice] = useState(0.0);
  const [degree, setDegree] = useState('');
  const [description, setDescription] = useState('');
  const [imgBase, setImgBase] = useState('');
  const [updatedImg, setUpdated] = useState(false);
  const [isModalVisible, setVisible] = useState(false);
  const params = useParams<any>();
  const [id] = useState(params.id);

  function handleBookName(e: any) {
    setBookName(e.target.value);
  }

  function handleAuthor(e: any) {
    setAuthor(e.target.value);
  }

  function handlePublisher(e: any) {
    setPublisher(e.target.value);
  }

  function handleType(getvalue: any) {
    setType(getvalue);
    console.log(getvalue);
  }

  function handlePrice(e: any) {
    setPrice(e);
  }

  function handleDegreee(e: any) {
    setDegree(e);
  }

  function handleDescription(e: any) {
    setDescription(e.target.value);
  }

  function handleFiles(file: any) {
    console.log(file.base64);
    setImgBase(file.base64);
    setUpdated(true);
  }

  function onSubmit() {
    if (updatedImg) {
      if (
        bookName != '' &&
        author != '' &&
        publisher != '' &&
        type != '' &&
        price != 0.0 &&
        degree != '' &&
        description != ''
      ) {
        try {
          Book_Publish(
            bookName,
            author,
            publisher,
            type,
            price.toString(),
            degree,
            description,
            imgBase,
            id,
          ).then(res => {
            console.log(res);
            history.push(`/mycenter/${id}`);
          });
        } catch (error) {
          console.log(error);
        }
      }
    } else {
      setVisible(true);
    }
  }

  function onFinish() {}

  function handleOk() {
    setVisible(false);
  }
  return (
    <div className={styles.main}>
      <Modal
        title="提示"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleOk}
      >
        <div className={styles.modal}>
          <h3>请上传图片</h3>
        </div>
      </Modal>
      <div className={styles.container}>
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
          layout="horizontal"
          onFinish={onFinish}
        >
          <Form.Item
            label="书名"
            name="bookname"
            rules={[{ required: true, message: '请输入书名' }]}
          >
            <Input
              onChange={handleBookName}
              value={bookName}
              placeholder="请输入书名"
            />
          </Form.Item>

          <Form.Item
            label="作者"
            name="authorname"
            rules={[{ required: true, message: '请输入作者' }]}
          >
            <Input
              onChange={handleAuthor}
              value={author}
              placeholder="请输入作者"
            />
          </Form.Item>

          <Form.Item
            label="出版社"
            name="press"
            rules={[{ required: true, message: '请输入出版社' }]}
          >
            <Input
              onChange={handlePublisher}
              value={publisher}
              placeholder="请输入出版社"
            />
          </Form.Item>

          <Form.Item
            label="书籍类型"
            name="type"
            rules={[{ required: true, message: '请选择书籍类型' }]}
          >
            <Select onChange={handleType} placeholder="请选择书籍类型">
              <Select.Option value="医学">医学</Select.Option>
              <Select.Option value="计算机">计算机</Select.Option>
              <Select.Option value="艺术">艺术</Select.Option>
              <Select.Option value="历史">历史</Select.Option>
              <Select.Option value="外语">外语</Select.Option>
              <Select.Option value="经济">经济</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="售价￥"
            name="price"
            rules={[{ required: true, message: '请输入售价' }]}
          >
            <InputNumber
              min={0}
              max={1000}
              precision={2}
              placeholder="请输入售价"
              onChange={handlePrice}
            />
          </Form.Item>

          <Form.Item
            label="书本描述"
            name="description"
            rules={[{ required: true, message: '请输入书本描述' }]}
          >
            <Input.TextArea
              onChange={handleDescription}
              value={description}
              rows={5}
              placeholder="请输入书本描述"
            />
          </Form.Item>

          <Form.Item
            label="新旧程度"
            name="oldrate"
            rules={[{ required: true, message: '请选择新旧程度' }]}
          >
            <Select onChange={handleDegreee} placeholder="请选择书本新旧程度">
              <Select.Option value="全新">全新</Select.Option>
              <Select.Option value="九成">九成</Select.Option>
              <Select.Option value="八成">八成</Select.Option>
              <Select.Option value="七成">七成</Select.Option>
              <Select.Option value="六成">六成</Select.Option>
              <Select.Option value="五成及以下">五成及以下</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item label="书籍图片">
            <ReactFileReader
              fileTypes={['.png', '.jpg']}
              base64={true}
              multipleFiles={true}
              handleFiles={handleFiles}
            >
              <button className="btn">上传图片</button>
            </ReactFileReader>
          </Form.Item>
          <div className={styles.imgBlock}>
            <h4>预览图：</h4>
            <img src={imgBase} alt="" />
          </div>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className={styles.submit}
              onClick={onSubmit}
            >
              一键发布
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default Publish;
